<script lang="ts" setup>
import { getCurrentInstance, nextTick, reactive, ref } from "vue";
import {
  onLoad,
  onPageScroll,
  onReady,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
import TnCommentList from "tnuiv3p-tn-comment-list/index.vue";
import { useUniAppSystemRectInfo } from "@tuniao/tnui-vue3-uniapp/hooks";
import { tnNavPage } from "@tuniao/tnui-vue3-uniapp/utils";
import TnScrollList from "@tuniao/tnui-vue3-uniapp/components/scroll-list/src/scroll-list.vue";
import TnPhotoAlbum from "@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue";
import TnLazyLoad from "@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue";
import TnAvatar from "@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue";
import TnAvatarGroup from "@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar-group.vue";
import TnInput from "@tuniao/tnui-vue3-uniapp/components/input/src/input.vue";
import TnTag from "@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue";
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";
import TnBadge from "@tuniao/tnui-vue3-uniapp/components/badge/src/badge.vue";
import TnEmpty from "@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue";
import TnDateTimePicker from "@tuniao/tnui-vue3-uniapp/components/date-time-picker/src/date-time-picker.vue";
import type { NavbarRectInfo } from "@tuniao/tnui-vue3-uniapp/components/navbar";
import type {
  TnCommentListInstance,
  TnReplyCommentParams,
  TnShowMoreCommentParams,
} from "tnuiv3p-tn-comment-list";
import PageContainer from "@/components/page-container/index";
import circlesPost from "@/api/circlesPost.js";
import circles from "@/api/circles.js";
import user from "@/api/user.js";
import {
  LOGIN_SCHEME,
  PROFILE_SCHEME,
  GALLERY_SCHEME,
  CIRCLE_LIST_SCHEME,
  TOPIC_LIST_SCHEME,
} from "@/utils/jump";
import {
  CHANNEL,
  FILE_URL,
  FILE_URL2,
  SYSTEM_CONFIG,
  USER_INFO,
  USER_TOKEN,
} from "@/api/config.js";
import {
  useScrollTransparentNavbar,
  useScrollUpdownBottomContent,
} from "@/hooks";

const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent("up", 80);

// 导航栏的高度
const navbarHeight = ref(0);
const instance = getCurrentInstance();
const { opacityScrollHandle, init: initTransparentScroll } =
  useScrollTransparentNavbar(instance);
const { navBarInfo } = useUniAppSystemRectInfo();

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height;
};
const commentListRef = ref<TnCommentListInstance>();
const state = reactive({
  loading: false,
  userToken: "",
  circlesPostId: 0,
  replyContent: "", // 回复内容
  replyNickname: "",
  replyCommentId: 0,
  keyboardHeight: 0,
  isObJoin: 0,
  textareaFocus: false,
  commentPopup: false,
  showOperatePopup: false,
  showStickyPeriodPopup: false,
  openDateTimePicker: false,
  circlesPostDetail: {
    id: 0,
    circles_id: 0,
    user_id: 0,
    user: {
      avatar: "",
    },
    circles: {
      image: "",
    },
    user_is_like: 0,
    like_total: 0,
    comment_total: 0,
    activity_users: [],
    activity_join_num: 0,
    like_users: [],
    like_users_num: 0,
    circles_manage: 0,
    attachment: [],
    attachment_type: "",
  },
  commentList: [],
  stickyPeriodDate: "",
  mpUrlLink: "",
  userInfo: {
    id: 0,
    avatar: "",
    nickname: "",
  },
  shareImage: "",
  systemConfig: {
    basic: {
      share_title: "多多养生，随时随地，分享身边新鲜事！",
      share_image: "",
    },
  },
});

const clickOperate = () => {
  state.showOperatePopup = true;
};

const clickUserCenter = (userId) => {
  console.log("[clickUserCenter]");
  // 调用 Flutter 的 JavaScriptChannel
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: `${PROFILE_SCHEME}${userId}` },
    })
  );
};

const jumpLogin = () => {
  // 调用 Flutter 的 JavaScriptChannel
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: `${LOGIN_SCHEME}` },
    })
  );
};

const handleAvatarClick = (user) => {
  // 调用 Flutter 的 JavaScriptChannel
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: `${PROFILE_SCHEME}${user.user_id}` },
    })
  );
};

const previewImageHandle = (currentIndex: number) => {
  // uni.previewImage({
  //   current: state.circlesPostDetail.attachment[currentIndex],
  //   urls: state.circlesPostDetail.attachment,
  // });
  console.log(`图片被点击 index: ${currentIndex}`);
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: {
        scheme: `${GALLERY_SCHEME}`,
        extra: {
          index: currentIndex,
          urls: JSON.stringify(state.circlesPostDetail.attachment),
        },
      },
    })
  );
};

const jumpCirclesPostReport = () => {
  if (state.userToken == "") {
    // tnNavPage("/pages/login/login");
    jumpLogin();
    return;
  }
  tnNavPage(
    `/circlesPostPages/report?circlesPostId=${state.circlesPostDetail.id}&publishUserId${state.circlesPostDetail.user_id}`
  );
  state.showOperatePopup = false;
};

const shareWechat = () => {
  state.showOperatePopup = false;
};

const setStickyPeriod = () => {
  state.showStickyPeriodPopup = true;
};

const clickStickyPeriodDate = () => {
  state.openDateTimePicker = true;
};
// 设置置顶
const confirmStickyPeriod = () => {
  console.log("confirmStickyPeriod", state.stickyPeriodDate);
  circles
    .topupDynamic({
      circles_id: state.circlesPostDetail.circles_id,
      circles_post_id: state.circlesPostId,
      top_time: state.stickyPeriodDate,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
      if (res.code == 1) {
        state.showStickyPeriodPopup = false;
        state.showOperatePopup = false;
      }
    })
    .catch((err) => {
      console.log(err, "confirmStickyPeriod");
    });
};

// 帖子下架
const circlesPostDelist = () => {
  circlesPost
    .circlesPostDelist({
      circles_post_id: state.circlesPostId,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
      if (res.code == 1) {
        state.showOperatePopup = false;
      }
    })
    .catch((err) => {
      console.log(err, "circlesPostDelist");
    });
};

// 帖子删除
const circlesPostDelete = () => {
  circlesPost
    .circlesPostDelete({
      circles_post_id: state.circlesPostId,
      circles_id: state.circlesPostDetail.circles_id,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
      if (res.code == 1) {
        state.showOperatePopup = false;
      }
    })
    .catch((err) => {
      console.log(err, "circlesPostDelete");
    });
};
// 生成微信小程序链接
const generateMpUrlLink = () => {
  circlesPost
    .generateMpUrlLink({
      path: "/circlesPostPages/detail",
      query: `?circlesPostId=${state.circlesPostId}`,
    })
    .then((res) => {
      console.log(res, "generateMpUrlLink");
      if (res.code == 1) {
        state.mpUrlLink = res.data;
        uni.setClipboardData({
          data: res.data,
          success: () => {
            uni.showToast({
              title: "复制成功",
            });
          },
          fail: (error) => {
            console.log("失败", error);
            uni.showToast({
              title: "复制失败",
              icon: "none",
            });
          },
        });
        state.showOperatePopup = false;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    })
    .catch((err) => {
      console.log(err, "generateMpUrlLink");
    });
};

// 查看更多评论
const showMoreClickHandle = ({ id }: TnShowMoreCommentParams) => {
  // 通过id去请求该评论的回复列表
  const subCommentList = state.commentList.find((items) => items.id === id);
  commentListRef.value?.addCommentData(id, subCommentList.comment);
};

const jumpMap = (
  longitude: any,
  latitude: any,
  location: any,
  poiaddress: any
) => {
  tnNavPage(
    `/pagesA/location?longitude=${longitude}&latitude=${latitude}&location=${location}&poiaddress=${poiaddress}`
  );
};
// 跳转到圈子详情页面
const navCirclesDetailPage = (circlesId: number) => {
  tnNavPage(`/circlesPages/detail?circlesId=${circlesId}`);
};

// 跳转到圈子聚合页
const navCirclesListPage = (circlesId: number) => {
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: `${CIRCLE_LIST_SCHEME}${circlesId}` },
    })
  );
};

// 跳转到帖子聚合页
const navTopicListPage = (circlesId: number) => {
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: `${TOPIC_LIST_SCHEME}${circlesId}` },
    })
  );
};

const clickLike = () => {
  circlesPost
    .circlesPostLike({
      circles_post_id: state.circlesPostId,
    })
    .then((res) => {
      if (res.code == 1) {
        if (state.circlesPostDetail.user_is_like == 0) {
          state.circlesPostDetail.user_is_like = 1;
          state.circlesPostDetail.like_total += 1;
        } else {
          state.circlesPostDetail.user_is_like = 0;
          state.circlesPostDetail.like_total -= 1;
        }
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    })
    .catch((err) => {
      console.log(err, "circlesPostLike");
    });
};
const clickObJoin = () => {
  circlesPost
    .circlesPostObJoin({
      circles_post_id: state.circlesPostId,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
      if (res.code == 1) {
        state.isObJoin = 1;
      }
    })
    .catch((err) => {
      console.log(err, "circlesPostObJoin");
    });
};

const clickCommentPopup = () => {
  if (state.userToken == "") {
    // tnNavPage("/pages/login/login");
    jumpLogin();
    return;
  }
  state.commentPopup = true;
  nextTick(() => {
    state.textareaFocus = true;
  });
};

const closeCommentPopup = () => {
  state.commentPopup = false;
  state.textareaFocus = false;
};

const replyCommentClickHandle = () => {
  if (!state.replyContent) {
    uni.showToast({
      icon: "none",
      title: "请输入内容",
    });
    return;
  }
  state.loading = true;
  circlesPost
    .circlesPostComment({
      circles_post_id: state.circlesPostId,
      content: state.replyContent,
      pid: state.replyCommentId,
      channel: uni.getStorageSync(CHANNEL),
    })
    .then((res) => {
      if (res.code == 1) {
        uni.showToast({
          title: "发表成功！",
          icon: "none",
        });
        state.loading = false;

        commentListRef.value?.addCommentReply(state.replyCommentId, {
          id: res.data.id,
          avatar: FILE_URL + state.userInfo.avatar,
          nickname: state.userInfo.nickname,
          date: "2秒前",
          position: res.data.position,
          content: state.replyContent,
          allowDelete: true,
          disabledReply: false,
        });
        state.replyContent = "";
        state.commentPopup = false;

        updateUserLevel();
      }
    })
    .catch((err) => {
      console.log(err, "circlesPostComment");
    });
};

const goFollowUser = (followUserId: number) => {
  user
    .followUser({
      follow_user_id: followUserId,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
      if (res.code == 1) {
        state.circlesPostDetail.user_is_follow == 1;
      }
    })
    .catch((err) => {
      console.log(err, "followUser");
    });
};

// 回复评论
const replyClickHandle = ({ id, nickname }: TnReplyCommentParams) => {
  state.commentPopup = true;
  nextTick(() => {
    state.textareaFocus = true;
  });

  state.replyContent = "";
  state.replyNickname = nickname;
  state.replyCommentId = Number.parseInt(id);
};

const deleteClickHandle = (id: string | number) => {
  // 通过id从数据库中删除评论
  // ...
  commentListRef.value?.deleteCommentReply(id);
};

const getCirclesPostDetail = () => {
  circlesPost
    .circlesPostDetail({
      circles_post_id: state.circlesPostId,
    })
    .then((res) => {
      if (res.code == 1) {
        if (res.data.attachment_type == "image") {
          if (Array.isArray(res.data.attachment)) {
            // 遍历 attachment 数组
            res.data.attachment = res.data.attachment.map((attachment) => {
              return `${FILE_URL}${attachment}`;
            });
          }
          state.shareImage = res.data.attachment[0];
        } else {
          // state.shareImage = FILE_URL + state.systemConfig.basic.share_image;
        }
        console.log(res.data, "detail");
        state.circlesPostDetail = res.data;
        state.replyNickname = res.data.user.nickname;

        if (state.circlesPostDetail.activity_users.length > 0) {
          const userExists = isUserIdInArray(
            state.userInfo.id,
            state.circlesPostDetail.activity_users
          );
          if (userExists) {
            state.isObJoin = 1;
          }
        }
      }
    })
    .catch((err) => {
      console.log(err, "getCirclesMemberLists");
    });
};
const isUserIdInArray = (userId: any, usersArray: any[]) => {
  return usersArray.some((item) => item.user.id === userId);
};
const getCirclesPostDetailComments = () => {
  circlesPost
    .circlesPostDetailComments({
      circles_post_id: state.circlesPostId,
    })
    .then((res) => {
      if (res.code == 1) {
        // let commentList = []
        // if (Array.isArray(res.data)) {
        //   commentList = res.data.map((comment) => {
        //     const newComment = { ...comment }
        //     if (newComment.avatar) {
        //       newComment.avatar = `${FILE_URL}${newComment.avatar}`
        //     }
        //     return newComment
        //   })
        // }
        // state.commentList = commentList
        state.commentList = res.data;
      }
    })
    .catch((err) => {
      console.log(err, "getCirclesPostDetailComments");
    });
};
const updateUserLevel = () => {
  user
    .updateUserLevel({
      type: "comment",
    })
    .then((res) => {});
};
onLoad((options) => {
  if (!options?.circlesPostId) {
    uni.showModal({
      title: "提示",
      content: "参数错误",
      showCancel: false,
      success: () => {
        uni.navigateBack();
      },
    });
    return;
  }
  state.circlesPostId = options.circlesPostId;
  const userInfo = uni.getStorageSync(USER_INFO);
  if (userInfo) {
    state.userInfo = userInfo;
  }
  state.userToken = uni.getStorageSync(USER_TOKEN);
  state.systemConfig = uni.getStorageSync(SYSTEM_CONFIG);

  getCirclesPostDetail();
  getCirclesPostDetailComments();
});
onReady(() => {
  initTransparentScroll();
});
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop);
  authInfoScrollHandle(instance, e.scrollTop);
});
onShareAppMessage(() => {
  return {
    title: state.circlesPostDetail.content.slice(0, 30),
    path: `/circlesPostPages/detail?circlesPostId=${state.circlesPostId}`,
    imageUrl: state.shareImage,
  };
});
onShareTimeline(() => {
  return {
    title: state.circlesPostDetail.content.slice(0, 30),
    path: `/circlesPostPages/detail?circlesPostId=${state.circlesPostId}`,
    imageUrl: state.shareImage,
  };
});
</script>
<template>
  <PageContainer :placeholder-bottom="true">
    <view class="page" :style="{ paddingTop: `${navbarHeight + 15}px` }">
      <view class="graphic-card">
        <!-- 简要信息 -->
        <view class="brief-info">
          <view class="brief-info__content">
            <view class="brief-info__avatar">
              <TnAvatar
                v-if="state.circlesPostDetail.user.is_vip == 1"
                :url="FILE_URL + state.circlesPostDetail.user.avatar"
                :border="true"
                :shadow="true"
                img-mode="aspectFill"
                size="lg"
                badge="icon-vip-diamond-fill"
                :badge-config="{
                  absoluteCenter: false,
                  absolutePosition: {
                    top: '65rpx',
                  },
                  bgColor: '#ffca28',
                }"
              />
              <TnAvatar
                v-else
                :url="FILE_URL + state.circlesPostDetail.user.avatar"
                :border="true"
                :shadow="true"
                img-mode="aspectFill"
                size="lg"
                @click="clickUserCenter(state.circlesPostDetail.user_id)"
              />
            </view>
            <view class="brief-info__data">
              <view class="title tn-text-ellipsis-1">
                {{ state.circlesPostDetail.user.nickname }}
                <image
                  v-if="state.circlesPostDetail.user.grade_icon != ''"
                  :src="FILE_URL + state.circlesPostDetail.user.grade_icon"
                  class="user-level-img"
                />
              </view>
              <view class="desc tn-text-ellipsis-1">
                {{ state.circlesPostDetail.update_date }}
              </view>
            </view>
          </view>
          <view
            v-if="state.circlesPostDetail.user_is_follow == 0"
            class="brief-info__operation"
          >
            <slot name="briefOperation">
              <TnButton
                shape="round"
                type="warning"
                text-color="#000"
                font-size="28rpx"
                @click="goFollowUser(state.circlesPostDetail.user.id)"
                >+关注</TnButton
              >
            </slot>
          </view>
          <!-- <view class="tn-ml-sm">
            <TnIcon
              name="more-vertical"
              size="35"
              :bold="true"
              :custom-style="{
                marginTop: '8rpx',
              }"
              @click="clickOperate"
            />
          </view> -->
        </view>
        <!-- 内容容器 -->
        <view class="container">
          <!-- 内容 -->
          <view class="content">
            <!-- 标签和内容 -->
            <view class="content__tags">
              <view
                v-for="(tagItem, tagIndex) in state.circlesPostDetail
                  .topics_name"
                :key="tagIndex"
                class="tag-item"
              >
                #{{ tagItem }}
              </view>
            </view>
            <view class="content__data">
              <text>{{ state.circlesPostDetail.content }}</text>
            </view>
          </view>
          <!-- 图片列表 -->
          <view
            v-if="state.circlesPostDetail.attachment_type == 'image'"
            class="images"
          >
            <!-- 一张图片 -->
            <view
              v-if="state.circlesPostDetail.attachment.length === 1"
              class="images-one"
              @click="previewImageHandle(0)"
            >
              <TnLazyLoad :src="state.circlesPostDetail.attachment[0]" />
            </view>
            <!-- 两张图片 -->
            <view
              v-if="state.circlesPostDetail.attachment.length === 2"
              class="images-two"
            >
              <TnPhotoAlbum
                :data="state.circlesPostDetail.attachment"
                :column="2"
                :preview="false"
                @click="previewImageHandle"
              />
            </view>
            <!-- 三张图片 -->
            <view
              v-if="state.circlesPostDetail.attachment.length === 3"
              class="images-three"
            >
              <view class="image-wrapper-left">
                <view class="image-container" @click="previewImageHandle(0)">
                  <TnLazyLoad :src="state.circlesPostDetail.attachment[0]" />
                </view>
              </view>
              <view class="image-wrapper-right">
                <view class="image-container" @click="previewImageHandle(1)">
                  <TnLazyLoad :src="state.circlesPostDetail.attachment[1]" />
                </view>
                <view class="image-container" @click="previewImageHandle(2)">
                  <TnLazyLoad :src="state.circlesPostDetail.attachment[2]" />
                </view>
              </view>
            </view>
            <!-- 四张图片 -->
            <view
              v-if="state.circlesPostDetail.attachment.length === 4"
              class="images-four"
            >
              <TnPhotoAlbum
                :data="state.circlesPostDetail.attachment"
                :column="2"
                :preview="false"
                @click="previewImageHandle"
              />
            </view>
            <TnPhotoAlbum
              v-if="state.circlesPostDetail.attachment.length >= 5"
              :data="state.circlesPostDetail.attachment"
              :preview="false"
              @click="previewImageHandle"
            />
          </view>

          <!-- 视频 -->
          <view
            v-if="state.circlesPostDetail.attachment_type == 'video'"
            class="video"
          >
            <video
              class="full-screen-video"
              :src="FILE_URL + state.circlesPostDetail.attachment"
              controls
            />
          </view>

          <!-- 语音 -->
          <view
            v-if="state.circlesPostDetail.attachment_type == 'voice'"
            class="audio"
          >
            <luch-audio
              :play.sync="true"
              :name="state.circlesPostDetail.user.nickname"
              author="录制"
              :poster="FILE_URL + state.circlesPostDetail.user.avatar"
              :src="FILE_URL + state.circlesPostDetail.attachment"
              :autoplay="false"
            />
          </view>
        </view>

        <!-- 链接 -->
        <view
          v-if="state.circlesPostDetail.attachment_type == 'link'"
          class="link"
        >
          <uni-link
            :href="state.circlesPostDetail.attachment"
            :text="state.circlesPostDetail.attachment"
            color="#007BFF"
            copy-tips="链接已复制"
            font-size="18"
          />
        </view>

        <view
          v-if="state.circlesPostDetail.plate == 'usedIdle'"
          class="bottom-money"
        >
          ¥ {{ state.circlesPostDetail.money }}
        </view>
        <view v-if="state.circlesPostDetail.plate == 'organizeBureau'">
          <view class="tn-mt" style="color: #01beff">
            时间： {{ state.circlesPostDetail.activity_time }}
          </view>
          <view class="tn-mt" style="color: #01beff">
            地点：
            <text
              @click="
                jumpMap(
                  state.circlesPostDetail.longitude,
                  state.circlesPostDetail.latitude,
                  state.circlesPostDetail.location,
                  state.circlesPostDetail.poiaddress
                )
              "
            >
              {{ state.circlesPostDetail.location }}
            </text>
          </view>
          <view class="tn-mt">
            <TnTag
              shape="round"
              bg-color="#ffca28"
              :border="false"
              :custom-style="{
                borderRadius: '10rpx 10rpx 0rpx 10rpx',
                padding: '8rpx 12rpx',
                marginRight: '20rpx',
                fontSize: '24rpx',
              }"
            >
              组局 {{ state.circlesPostDetail.activity_join_num }}/{{
                state.circlesPostDetail.activity_num
              }}
            </TnTag>
          </view>
          <view
            class="bottom-organize_bureau tn-gradient-bg__blue-light tn-radius tn-pt"
          >
            <view
              v-for="(item, index) in state.circlesPostDetail.activity_users"
              :key="index"
              class="list-item"
            >
              <TnBadge
                v-if="state.circlesPostDetail.user_id == item.user.id"
                value="发起人"
                type="warning"
              >
                <view class="item-image">
                  <image
                    class="tn-image"
                    :src="FILE_URL + item.user.avatar"
                    mode="aspectFill"
                  />
                </view>
              </TnBadge>
              <view v-else class="item-image">
                <image
                  class="tn-image"
                  :src="FILE_URL + item.user.avatar"
                  mode="aspectFill"
                />
              </view>
              <view class="item-title tn-text-center tn-text-ellipsis-1">
                {{ item.user.nickname }}
              </view>
            </view>
          </view>
        </view>

        <!-- 底部信息 -->
        <view
          v-if="
            state.circlesPostDetail.plate != 'organizeBureau' &&
            state.circlesPostDetail.location != ''
          "
          class="location-info"
        >
          <TnButton
            plain
            border-color="tn-grey-disabled"
            custom-class="custom-button-class"
            @click="
              jumpMap(
                state.circlesPostDetail.longitude,
                state.circlesPostDetail.latitude,
                state.circlesPostDetail.location,
                state.circlesPostDetail.poiaddress
              )
            "
          >
            <TnIcon name="location-fill" color="tn-blue" />
            <view class="location-name">
              {{ state.circlesPostDetail.location }}
            </view>
          </TnButton>
        </view>
        <view class="bottom-info">
          <view class="bottom-info__left">
            <view
              class="tag-circles"
              @click="navCirclesListPage(state.circlesPostDetail.circles.id)"
            >
              <view class="tn-flex-center-center">
                <view class="circles-pic">
                  <view
                    class="circles-image"
                    :style="
                      'background-image: url(' +
                      FILE_URL2 +
                      state.circlesPostDetail.circles.image +
                      ')'
                    "
                  />
                </view>
                <view class="circles-name tn-text-ellipsis-1">
                  {{ state.circlesPostDetail.circles.name }}
                </view>
              </view>
            </view>
          </view>
          <view class="bottom-info__right">
            <!-- 底部右侧数据 -->
            <!-- <view class="count-item-data">
              <TnIcon name="eye" />
              <view class="count">
                {{ state.circlesPostDetail.view_total }}
              </view>
            </view> -->
            <!-- <view class="count-item-data">
              <TnIcon name="message" />
              <view class="count">
                {{ state.circlesPostDetail.comment_total }}
              </view>
            </view> -->
            <!-- <view class="count-item-data">
              <TnIcon name="like" />
              <view class="count">
                {{ state.circlesPostDetail.like_total }}
              </view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <view style="border-bottom: 20rpx solid var(--tn-color-gray-light)" />
    <view class="comment-container">
      <view class="tn-p tn-flex tn-flex-row tn-flex-nowrap">
        <view class="tn-flex items-center tn-text-lg" style="width: 40vw">
          <view class="">
            评论
            <template v-if="state.circlesPostDetail.comment_total > 0">
              {{ state.circlesPostDetail.comment_total }}
            </template>
          </view>
        </view>
        <view
          class="right tn-flex justify-end items-center"
          style="width: 55vw"
        >
          <!-- <view
            class="tn-flex tn-flex-row items-center"
            @click="clickCommentPopup"
          >
            <TnIcon
              name="reply"
              size="50"
              :custom-style="{
                margin: '0 0 0 50rpx',
              }"
            />
            <view>写评论</view>
          </view> -->
        </view>
      </view>

      <view class="comment-list">
        <TnEmpty
          v-if="state.commentList.length == 0"
          mode="comment"
          color="#ebebeb"
          size="xl"
        />
        <TnCommentList
          v-else
          ref="commentListRef"
          :data="state.commentList"
          :show-like="false"
          :show-dislike="false"
          @avatar-click="handleAvatarClick"
          @show-more="showMoreClickHandle"
          @reply="replyClickHandle"
          @delete="deleteClickHandle"
        />
      </view>
    </view>
    <view class="bottom-opacity-info1" :style="{ ...authInfoScrollStyle }">
      <!-- <view class="left">
        <view
          v-if="state.circlesPostDetail.plate != 'organizeBureau'"
          class="avatar"
        >
          <TnAvatarGroup border>
            <TnAvatar
              v-for="(item, index) in state.circlesPostDetail.like_users"
              :key="index"
              :url="FILE_URL + item.user.avatar"
              size="70"
            />
          </TnAvatarGroup>
        </view>
        <view class="info-data">
          <view class="tn-flex items-end">
            <view
              v-if="state.circlesPostDetail.plate == 'organizeBureau'"
              class="name"
              >已有 {{ state.circlesPostDetail.activity_join_num }} 人参与</view
            >
            <view v-else class="name">
              {{ state.circlesPostDetail.like_users_num }} 赞/喜欢
            </view>
          </view>
        </view>
      </view> -->
      <!-- <view class="right">
        <view
          v-if="state.circlesPostDetail.plate == 'organizeBureau'"
          class="button-operation tn-flex-center"
        >
          <TnButton
            v-if="state.isObJoin == 0"
            shape="round"
            :custom-style="{ padding: '20rpx 50rpx' }"
            @click="clickObJoin"
          >
            我要加入
          </TnButton>
          <TnButton
            v-else
            type="info"
            shape="round"
            :custom-style="{ padding: '20rpx 50rpx' }"
          >
            已加入
          </TnButton>
        </view>
        <view v-else class="icon-text-container" @click="clickLike">
          <view class="tn-flex tn-flex-column">
            <TnIcon
              v-if="state.circlesPostDetail.user_is_like == 0"
              name="like-lack"
              size="50"
            />
            <TnIcon v-else name="like-lack-fill" color="#ff444f" size="50" />
          </view>
          <view class="text">赞/喜欢</view>
        </view>
      </view> -->
    </view>
  </PageContainer>
  <TnPopup
    v-model="state.commentPopup"
    open-direction="bottom"
    radius="30"
    :safe-area-inset-bottom="false"
  >
    <view class="popup-box">
      <view class="header tn-flex tn-flex-row tn-flex-nowrap justify-between">
        <TnButton
          shape="round"
          bg-color="tn-grey-light"
          text-color="tn-gray"
          @click="closeCommentPopup"
        >
          取消
        </TnButton>
        <view class="tn-text-bold tn-text-lg">评论</view>
        <TnButton
          shape="round"
          bg-color="#FFE11B"
          :loading="state.loading"
          @click="replyCommentClickHandle"
        >
          发送
        </TnButton>
      </view>
      <view class="content">
        <TnInput
          v-model="state.replyContent"
          type="textarea"
          :placeholder="`回复${state.replyNickname}:`"
          :maxlength="150"
          clearable
          show-word-limit
          :show-confirm-bar="false"
          :cursor-spacing="50"
          :focus="state.textareaFocus"
        />
      </view>
    </view>
  </TnPopup>
  <!-- 帖子操作 -->
  <TnPopup v-model="state.showOperatePopup" open-direction="bottom">
    <view class="tn-p" style="background-color: #f8f7f8">
      <view class="">
        <view class="tn-mb tn-text-center">分享</view>
        <TnScrollList :indicator="false">
          <view class="operate-item-container">
            <view class="scroll-item">
              <TnButton only-button open-type="share" @click="shareWechat">
                <view class="icon">
                  <TnIcon name="wechat-fill" size="60" color="#00d886" />
                </view>
              </TnButton>
              <view class="title">微信好友</view>
            </view>
            <view class="scroll-item" @click="generateMpUrlLink">
              <view class="icon">
                <TnIcon name="link" size="50" color="#01beff" />
              </view>
              <view class="title">复制链接</view>
            </view>
          </view>
        </TnScrollList>
      </view>
      <view class="tn-mt-lg">
        <TnScrollList :indicator="false">
          <view class="operate-item-container">
            <view class="scroll-item" @click="jumpCirclesPostReport">
              <view class="icon">
                <TnIcon name="warning" size="50" />
              </view>
              <view class="title">投诉举报</view>
            </view>
            <view
              v-if="state.circlesPostDetail.circles_manage == 1"
              class="scroll-item"
              @click="setStickyPeriod"
            >
              <view class="icon">
                <TnIcon name="bookmark" size="50" />
              </view>
              <view class="title">置顶</view>
            </view>
            <view
              v-if="
                state.circlesPostDetail.circles_manage == 1 ||
                state.circlesPostDetail.user_id == state.userInfo.id
              "
              class="scroll-item"
              @click="circlesPostDelist"
            >
              <view class="icon">
                <TnIcon name="clear" size="50" />
              </view>
              <view class="title">下架</view>
            </view>
            <!-- <view class="scroll-item">
              <view class="icon">
                <TnIcon name="emoji-sad" size="50" />
              </view>
              <view class="title">不喜欢</view>
            </view>
            <view class="scroll-item">
              <view class="icon">
                <TnIcon name="my-reduce" size="50" />
              </view>
              <view class="title">拉黑用户</view>
            </view> -->
            <view
              v-if="state.circlesPostDetail.user_id == state.userInfo.id"
              class="scroll-item"
              @click="circlesPostDelete"
            >
              <view class="icon">
                <TnIcon name="delete" size="50" />
              </view>
              <view class="title">删除</view>
            </view>
          </view>
        </TnScrollList>
      </view>
    </view>
  </TnPopup>

  <!-- 置顶期限 -->
  <TnPopup v-model="state.showStickyPeriodPopup" width="80%" height="330">
    <view class="tn-p-lg">
      <view class="tn-text-center tn-text-bold">请设置置顶期限</view>
      <view class="tn-mt tn-mb">
        <TnInput
          v-model="state.stickyPeriodDate"
          type="select"
          placeholder="请选择置顶期限"
          :custom-style="{
            backgroundColor: 'transparent',
          }"
          @click="clickStickyPeriodDate"
        />
      </view>
      <view class="tn-mt-lg tn-text-center">
        <TnButton width="100%" height="70rpx" @click="confirmStickyPeriod">
          确 认
        </TnButton>
      </view>
    </view>
  </TnPopup>
  <!-- 选择日期与时间 -->
  <TnDateTimePicker
    v-model="state.stickyPeriodDate"
    v-model:open="state.openDateTimePicker"
    min-time="2025-01-01"
    mode="date"
    format="YYYY-MM-DD"
  />
</template>

<style lang="scss" scoped>
@use "./styles/detail.scss";
@use "@/static/css/graphic-card.scss";
</style>
